<template>
    <div class="customer">
        <Badge :id="customerInfo.id" :class="badgeClass"></Badge>
        <ul class="customer-diet">
            <Diet
                v-for="(item,index) in Array.from(customerInfo.orderMap)"
                :key="index"
                :diet-info="Array.from(item)"
                :names ="names"
                :times ="times"
                :eat-time ="customerInfo.eatTime"
                :order-time="customerInfo.orderTime"
                :cur-time="curTime"
            >
            </Diet>
        </ul>
        <i class="func-btn">
            <img v-if="status == 'outDate'" src="../assets/heart.png" @click="comfortCustomer">
            <img v-if="status == 'pay'" src="../assets/money.png" @click="pay">
        </i>
         <p class="userName">{{ "webmooc_" + customerInfo.id}} 正在{{ statusNames[status] }}</p>
    </div>
</template>

<script>
import Badge from './Badge.vue'
import Diet from './Diet.vue'
export default {
    name: 'customer',
    components:{Badge,Diet},
    props:{
        customerInfo:Object,
        names:Map,
        times:Map,
        curTime:Number
    },
    data(){
        return{
            status : 'wait',
            statusNames:{
                'wait': "等待",
                'eat': "吃饭ing",
                "pay":"支付",
                "outDate": "失去耐性"
            }
        }
    },
    computed:{
        orderInfo(){
            return Array.from(this.customerInfo.orderMap)
        },

        badgeClass(){
            return {
                eat: this.status == 'eat',
                wait: this.status == 'wait',
                outDate: this.status == 'outDate',
                pay: this.status == 'pay'
            }
        }

    },

    watch:{
        orderInfo:function(newVal){
            this.status = this.getStatus(newVal)
        }
    },

    methods:{
        comfortCustomer(){
            this.$emit('comfortcustomer')
        },
        pay(){
            this.$emit('pay')
        },
        getStatus(orderList){
            let eatNum = 0
            let waitNum = 0
            let outDateNum = 0
            for (let index = 0; index < orderList.length; index++) {
                switch(orderList[index][1]){
                    case 0:
                        waitNum++;
                        break;
                    case 1:
                        eatNum++;
                        break;
                    case 3:
                        outDateNum++;
                        break;
                    default:
                        break;
                }    
            }
            if(orderList.length>0){
                if(eatNum > 0){
                    return 'eat'
                }

                if(waitNum > 0){
                    return 'wait'
                }

                if(outDateNum == orderList.length){
                    return 'outDate'
                }

                return 'pay'
            }
            return 'wait'
        }
    }
}
</script>

<style scoped>
    .customer{
        position: relative;
        width: 64%;
    }

    .customer-diet{
        position: absolute;
        top: 0;
        left: 70%;
        width: 100%;
        line-height: 1.5;
        list-style-type: none;
    }

    .func-btn img{
        width: 100px;
        height: 100px;
    }

    .func-btn{
        position: absolute;
        left: 0;
        bottom: 0;
        transform: translateX(-30%);
    }

    .eat{
        background-color: #ff9122;
    }

    .wait{
        background-color: #ff2626;
    }

    .outDate{
        background-color: #661a00;
    }

    .pay{
        background-color: #80ff00;
    }

    .userName{
        margin-top: 10px;
        font-weight: bold;
        font-size: 30px;
    }
</style>